<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Cousine|Inconsolata" rel="stylesheet">
	<link rel="shortcut icon" type="image/png" href="/favicon.png">

	
	<link rel="stylesheet" href="/css/style.css">
	<link rel="stylesheet" href="/css/css/fontawesome-all.min.css">
	<script src="/js/main.js"></script>
	

	<!-- Begin Jekyll SEO tag v2.1.0 -->
<title>JS: Search Tags - Steem Developer</title>
<meta property="og:title" content="JS: Search Tags" />
<meta name="description" content="By the end of this tutorial you should know how to run a search for trending tags" />
<meta property="og:description" content="By the end of this tutorial you should know how to run a search for trending tags" />
<link rel="canonical" href="https://developer.steem.io/tutorials-javascript/search_tags" />
<meta property="og:url" content="https://developer.steem.io/tutorials-javascript/search_tags" />
<meta property="og:site_name" content="Steem Developer" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2018-07-20T12:56:08-05:00" />
<script type="application/ld+json">
{"@context": "http://schema.org",
"@type": "BlogPosting",
"headline": "JS: Search Tags",
"datePublished": "2018-07-20T12:56:08-05:00",
"description": "By the end of this tutorial you should know how to run a search for trending tags",
"url": "https://developer.steem.io/tutorials-javascript/search_tags"}</script>
<!-- End Jekyll SEO tag -->


	
</head>
<body>
<header>
	<h1>
		<button type="button" class="open-nav" id="open-nav"></button>
		<a href="/"  class="logo-link"><img src="/images/logotype_white.svg" height="40" alt="Steem Developer logo"></a>
	</h1>

	
	<form action="/search/" method="get">
		<input type="text" name="q" id="search-input" placeholder="Search">
		<input type="submit" value="Search" style="display: none;">
	</form>
	

	<div id="sidebar" class="sidebar">
	
	
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/">
		<h6 class="ctrl-nav-section title">Introduction</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/#introduction-welcome">Welcome to Steem</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/quickstart/">
		<h6 class="ctrl-nav-section title">Quickstart</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/quickstart/#quickstart-choose-library">Choose Library</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-steemd-nodes">steemd Nodes</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-testnet">Steem Testnet</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/tutorials/">
		<h6 class="ctrl-nav-section title">Tutorials</h6>
		<ul class="cont-nav-section content">
			
				
					
						<li><a href="/tutorials/#tutorials-javascript">Javascript</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-python">Python</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-ruby">Ruby</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-recipes">Recipes</a></li>
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/services/">
		<h6 class="ctrl-nav-section title">Services</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/services/#services-steemit">Steemit.com</a></li>
						
					
						
						<li><a href="/services/#services-steemconnect">SteemConnect</a></li>
						
					
						
						<li><a href="/services/#services-jussi">jussi</a></li>
						
					
						
						<li><a href="/services/#services-imagehoster">ImageHoster</a></li>
						
					
						
						<li><a href="/services/#services-sbds">SBDS</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/apidefinitions/">
		<h6 class="ctrl-nav-section title">Appbase API</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/apidefinitions/#apidefinitions-condenser-api">Condenser Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-by-key-api">Account By Key Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops-comment">Broadcast Ops Comment</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-history-api">Account History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-database-api">Database Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-follow-api">Follow Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-jsonrpc">Jsonrpc</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-market-history-api">Market History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-network-broadcast-api">Network Broadcast Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-tags-api">Tags Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-witness-api">Witness Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-block-api">Block Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops">Broadcast Ops</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/community/">
		<h6 class="ctrl-nav-section title">Community</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/community/#community-overview">Overview</a></li>
						
					
						
						<li><a href="/community/#community-resources">Resources</a></li>
						
					
						
						<li><a href="/community/#community-developeradvocate">Sharing & Help</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/glossary/">
		<h6 class="ctrl-nav-section title">Glossary</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/glossary/#glossary-chain-basics">Chain Basics</a></li>
						
					
						
					
						
						<li><a href="/glossary/#glossary-governance">Governance</a></li>
						
					
						
						<li><a href="/glossary/#glossary-transactions">Transactions</a></li>
						
					
						
						<li><a href="/glossary/#glossary-api">API</a></li>
						
					
						
						<li><a href="/glossary/#glossary-market">Market</a></li>
						
					
				
			
		</ul>
	</section>
	
</div>


	<!--<p class="copyright">-->
	<!--<a href="https://steemit.com.com/">-->
	<!--steemit-->
	<!--</a>-->
	<!--</p>-->
	<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</header>
<div class="main" id="top">
	<div class="hero">
		<h1 class="hero__h1">Steem Developer Portal </h1>
		
		<img class="hero__img" src="/images/hero.png">
		
	</div>
	<section id="tutorials-javascript-search-tags" class="row tutorials-javascript-search-tags">
	<h3>
		<a id="tutorials-javascript-search-tags">
			JS: Search Tags
			
		</a>
	</h3>
	
		<p class="description">By the end of this tutorial you should know how to run a search for trending tags</p>
	

	<p><span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of <a href="https://github.com/steemit/devportal-tutorials-js/tree/master/tutorials/16_search_tags">Search Tags</a> can be downloaded as part of the <a href="https://github.com/steemit/devportal-tutorials-js">JS tutorials repository</a>.</span>
<br /></p>

<p>This tutorial runs on the main Steem blockchain.</p>

<h2 id="intro">Intro</h2>

<p>This tutorial will show the method of capturing a queried tag name and matching it to the steemit database. We are using the <code class="highlighter-rouge">call</code> function provided by the <code class="highlighter-rouge">dsteem</code> library to pull tags from the steem blockchain. A simple HTML interface is used to both capture the string query as well as display the completed search.</p>

<h2 id="steps">steps</h2>

<ol>
  <li><a href="#configure-conn"><strong>Configure connection</strong></a> Configuration of <code class="highlighter-rouge">dsteem</code> to use the proper connection and network.</li>
  <li><a href="#search-input"><strong>Search input</strong></a> Collecting the relevant search criteria</li>
  <li><a href="#run-search"><strong>Run Search</strong></a> Running the search on the blockchain</li>
  <li><a href="#output"><strong>Output</strong></a> Displaying the results of the search query</li>
</ol>

<h4 id="1-configure-connection-">1. Configure connection <a name="configure-conn"></a></h4>

<p>Below we have <code class="highlighter-rouge">dsteem</code> pointing to the production network with the proper chainId, addressPrefix, and endpoint. There is a <code class="highlighter-rouge">public/app.js</code> file which holds the Javascript segment of this tutorial. In the first few lines we define the configured library and packages:</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kr">const</span> <span class="nx">dsteem</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'dsteem'</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{};</span>
<span class="c1">//connect to production server</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">addressPrefix</span> <span class="o">=</span> <span class="s1">'STM'</span><span class="p">;</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">chainId</span> <span class="o">=</span>
    <span class="s1">'0000000000000000000000000000000000000000000000000000000000000000'</span><span class="p">;</span>
<span class="c1">//connect to server which is connected to the network/production</span>
<span class="kr">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">Client</span><span class="p">(</span><span class="s1">'https://api.steemit.com'</span><span class="p">);</span>
</code></pre>
</div>

<h4 id="2-search-input-">2. Search input <a name="search-input"></a></h4>

<p>Collecting of the search criteria happens via an HTML input. The form can be found in the <code class="highlighter-rouge">index.html</code> file. The values are pulled from that screen with the below:</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kr">const</span> <span class="nx">max</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">submitTag</span> <span class="o">=</span> <span class="nx">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="kr">const</span> <span class="nx">tagSearch</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"tagName"</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
</code></pre>
</div>

<h4 id="3-run-search-">3. Run Search <a name="run-search"></a></h4>

<p>In order to access the blockchain to run the search a <code class="highlighter-rouge">call</code> function is used with the <code class="highlighter-rouge">search field</code> and <code class="highlighter-rouge">maximum</code> list items as parameters.</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kr">const</span> <span class="nx">_tags</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">client</span><span class="p">.</span><span class="nx">database</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="s1">'get_trending_tags'</span><span class="p">,[</span><span class="nx">tagSearch</span><span class="p">,</span> <span class="nx">max</span><span class="p">]);</span>
</code></pre>
</div>

<p>The result of the search is an array of tags along with their respective vital data like <code class="highlighter-rouge">comments</code>, <code class="highlighter-rouge">payouts</code> and such.</p>

<h4 id="4-output-">4. Output <a name="output"></a></h4>

<p>Due to the output from the <code class="highlighter-rouge">call</code> function being an array, we can’t use a simple <code class="highlighter-rouge">post</code> function to display the tags. The specific fields within the array needs to be selected and then displayed.</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'tags: '</span><span class="p">,</span> <span class="nx">_tags</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">posts</span> <span class="o">=</span> <span class="p">[];</span>
<span class="nx">_tags</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">post</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">posts</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span>
        <span class="err">`</span><span class="o">&lt;</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"list-group-item"</span><span class="o">&gt;&lt;</span><span class="nx">h5</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"list-group-item-heading"</span><span class="o">&gt;</span><span class="nx">$</span><span class="p">{</span>
            <span class="nx">post</span><span class="p">.</span><span class="nx">name</span>
        <span class="p">}</span><span class="o">&lt;</span><span class="sr">/h5&gt;&lt;/</span><span class="nx">div</span><span class="o">&gt;</span><span class="err">`</span>
    <span class="p">);</span>
<span class="p">});</span>
<span class="c1">//disply list of tags with line breaks</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'tagList'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">posts</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">'&lt;br&gt;'</span><span class="p">);</span>
</code></pre>
</div>

<h3 id="to-run-this-tutorial">To run this tutorial</h3>

<ol>
  <li>clone this repo</li>
  <li><code class="highlighter-rouge">cd tutorials/16_search_tags</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm run dev-server</code> or <code class="highlighter-rouge">npm run start</code></li>
  <li>After a few moments, the server should be running at <a href="http://localhost:3000/">http://localhost:3000/</a></li>
</ol>

<hr />

</section>

</div>
<div class="footer">
	<a href="#">Back to top</a>
</div>
<script>
    document.getElementById("open-nav").addEventListener("click", function () {
        document.body.classList.toggle("nav-open");
    });
</script>
</body>
</html>


<script src="/js/adjust.js"></script>

